<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色</title>
</head>
<body>
<div class="layui-fluid">
    <a class="layui-btn layui-btn-normal" style="margin-left: 90%;" name="addRole">添加新角色</a>
</div>
<div class="layui-fluid">
    <table class="layui-table" lay-even="" lay-skin="row">
        <colgroup>
            <col width="4%">
            <col width="10%">
            <col width="75%">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>序号</th>
            <th>角色</th>
            <th>权限</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <#list roles as role>
            <tr>
                <td>${role_index+1}</td>
                <td>${role.role}</td>
                <td>
                    <#if role.raRoots?? && (role.raRoots?size > 0)>
                        <div class="layui-btn-container">
                            <#list role.raRoots as root>
                                <span class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger" value="${root.descript}">${root.descript}</span>
                            </#list>
                        </div>
                     <#else>
                         <span class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal">暂无权限</span>
                    </#if>
                </td>
                <td>
                    <div class="layui-btn-group">
                        <a class="layui-btn layui-btn-sm" roleInfo=${role.jsonString} name="roleInfo"><i class="layui-icon">&#xe642;</i></a>
                        <a class="layui-btn layui-btn-sm" roleId=${role.id} name="deleteRole"><i class="layui-icon">&#xe640;</i></a>
                    </div>
                </td>
            </tr>
        </#list>
        </tbody>
    </table><br>
</div>

<div id="updateRole" class="layui-fluid" hidden style="margin-top: 20px;">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block" style="width: 30%;">
                <input type="text" id="roleName" name="roleName" lay-verify="title" autocomplete="off"  class="layui-input" disabled>
            </div>
        </div>
    <#if roots?? && (roots?size > 0)>
        <div class="layui-form-item">
            <label class="layui-form-label">权限</label>
            <div class="layui-input-block">
                <div class="layui-btn-container">
                    <#list roots as root>
                        <input type="checkbox" value="${root.id}" name="root" title=${root.descript}>
                    </#list>
                </div>
            </div>
        </div>
    </#if>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="confirmRole">确认修改</button>
            <a id="resetbtn" class="layui-btn layui-btn-primary">取消所有权限</a>
        </div>
    </div>
    </form>
</div>

<div id="addRoleInfo" class="layui-fluid" hidden style="margin-top: 20px;">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block" style="width: 30%;">
                <input type="text" id="addRoleName" required  lay-verify="required" lay-verify="title" autocomplete="off"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block" style="width: 30%;">
                <input type="text" id="addRoleDesc" required  lay-verify="required" lay-verify="title" autocomplete="off"  class="layui-input">
            </div>
        </div>
    <#if roots?? && (roots?size > 0)>
        <div class="layui-form-item">
            <label class="layui-form-label">权限</label>
            <div class="layui-input-block">
                <#list roots as root>
                    <input type="checkbox" value="${root.id}" name="myRoot" title=${root.descript}>
                </#list>
            </div>
        </div>
    </#if>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="confirmAdd">确认添加</button>
                <button id="resetInfo" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>


</body>
</html>